<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:form id="frmDetalleOpcion" onkeypress="if (event.keyCode == 13) return false;">
        <p:focus context="panelOpcion" />
        <p:panel id="panelOpcion" >
            <table style="border-spacing: 5px;width: 100%" >
                <tbody>
                    <tr>
                        <td style="width: 130px;"><h:outputLabel value="Nid de Opcion :" /></td>
                        <td style="width: 400px;">
                            <p:inputText  value="#{opcionController.bean.id}" style="width: 100px" disabled="true" styleClass="disabled">
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Módulo :" /></td>
                        <td>
                            <p:inputText  value="#{opcionController.selectedModuloOpcion.id} - #{opcionController.selectedModuloOpcion.txtModulo}" 
                                          style="width: 400px; font-weight: bold;" disabled="true" styleClass="disabled">
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 130px;"><h:outputLabel value="Opcion Padre :" rendered="#{opcionController.bean.nidOpcionPadre != null}"/></td>
                        <td style="width: 400px;">
                            <p:inputText  id="txtModuloOpcionPadre" value="#{(opcionController.bean.nidOpcionPadre != null)?opcionController.bean.nidOpcionPadre.txtOpcion:'-'}" 
                                          style="width: 372px; font-weight: bold;" disabled="true" styleClass="disabled" rendered="#{opcionController.bean.nidOpcionPadre != null}">
                            </p:inputText>
                        <p:commandButton icon="ui-icon-search"  oncomplete="buscaOpcionModulo.show()"
                                             actionListener="#{opcionController.searchOpcionPadre()}"
                                             update=":frmListarModuloOpcion:grdListadoModuloOpcionBus" disabled="#{opcionController.esNuevo}"
                                             rendered="#{opcionController.bean.nidOpcionPadre != null}">
                            </p:commandButton>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Opcion :" /></td>
                        <td>
                            <p:inputText value="#{opcionController.bean.txtOpcion}" style="width: 400px;" maxlength="250">
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Nombre de Objeto:" /></td>
                        <td>
                            <p:inputText value="#{opcionController.bean.txtNombreObjeto}" style="width: 400px;" maxlength="250">
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="URL :" /></td>
                        <td>
                            <p:inputText value="#{opcionController.bean.txtUrl}" style="width: 400px;" maxlength="250">
                            </p:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Orden de la Opción :" /></td>
                        <td>
                        <p:inputText value="#{opcionController.bean.numOrden}" 
                                     onkeypress="return isNumberKey(event)"
                                     style="width: 60px;" maxlength="6"/>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Fecha de caducidad :" /></td>
                        <td>
                            <p:calendar value="#{opcionController.bean.fecCaducidad}" showOn="button" locale="es" 
                                            navigator="true" maxlength="10" pattern="dd/MM/yyyy"/>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <p:selectBooleanCheckbox value="#{opcionController.BActivo}" itemLabel="Activo" disabled="#{opcionController.esNuevo}">
                                    <p:ajax update="panelOpcion" listener="#{opcionController.muestraObservacion}"/> 
                            </p:selectBooleanCheckbox>
                            <p:selectBooleanCheckbox value="#{opcionController.BVisible}" itemLabel="Visible" style="margin-left: 30px;">
                            </p:selectBooleanCheckbox>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Observación :" rendered="#{opcionController.BMuestraObs}"/></td>
                        <td>
                            <p:inputTextarea id="obsOpcion" counter="counter" maxlength="250" counterTemplate="{0} caracteres disponibles." 
                                style="overflow-y:auto;width: 400px;height: 50px;font-size: 11px;"
                                rendered="#{opcionController.BMuestraObs}" value="#{opcionController.bean.txtObservacion}"/> 
                            <br/>
                            <h:outputText id="counter" />  
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">
                            <p:toolbar style="padding: 3px;">
                                <p:toolbarGroup align="right">
                                    <p:commandButton style="margin-right: 40px;" value="Grabar" icon="ui-icon-disk" process=":frmDetalleOpcion"
                                                     update=":frmGestionarOpciones:msjOpciones" actionListener="#{opcionController.saveOpcion}"/>
                                    <p:commandButton value="Cerrar" icon="ui-icon-close" process="@this" oncomplete="wDetalleOpcion.hide()"/>
                                </p:toolbarGroup>
                            </p:toolbar>
                        </td>
                    </tr>
                </tfoot>
            </table>  
        </p:panel>
    </h:form>
</ui:composition>